<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>组件</title>
    <link rel="stylesheet" href="style.css">
    <script src="../dist/vue.js"></script>
</head>
<!-- component template -->
<script type="text/x-template" id="grid-template">
    <table>

        <thead>
            <tr>
                <th v-for="key in columns"
                 @click="sortBy(key)" 
                 :style="styleObject" 
                 :class="{active: sortKey == key}">
                    {{key | capitalize}}
                  <span class="arrow"
                    :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
                  </span>
                </th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="
                    entry in data
                    | filterBy filterKey
                    | orderBy sortKey sortOrders[sortKey]">
                <td v-for="key in columns">
                    {{entry[key]}}
                </td>
            </tr>
        </tbody>

    </table>
</script>
<div id="demo">
    <form id="search">
        Search
        <input name="query" v-model="searchQuery">
    </form>
    <demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">
    </demo-grid>
</div>
<script type="text/javascript">
Vue.component('demo-grid', {
    template: '#grid-template',
    replace: true,
    props: {
        data: Array,
        columns: Array,
        filterKey: String
    },
    data: function() {
        var sortOrders = {}
        this.columns.forEach(function(key) {
            sortOrders[key] = 1
        })
        return {
            sortKey: '',
            sortOrders: sortOrders,
            styleObject: {
                color: 'red',
                fontSize: '13px'
            }
        }
    },
    methods: {
        sortBy: function(key) {
            this.sortKey = key
            this.sortOrders[key] = this.sortOrders[key] * -1
                              console.log(this.sortOrders)
        }
    }
})


var demo = new Vue({
  el: '#demo',
  data: {
    searchQuery: '',
    gridColumns: ['name', 'power'],
    gridData: [
      { name: 'Chuck Norris', power: Infinity },
      { name: 'Bruce Lee', power: 9000 },
      { name: 'Jackie Chan', power: 7000 },
      { name: 'Jet Li', power: 8000 }
    ]
  }
})

</script>

<body>
</body>

</html>
